<template>
    <div class="card">
        <h4 class="normal card_map_title">
            <div>
                 <svg class="icon card_icon" aria-hidden="true">
                    <use xlink:href="#icon-ditu"></use>
                </svg>
                电子地图 
                <svg class="icon card_icon quanping" aria-hidden="true"  @click="quanping()">
                    <use xlink:href="#icon-quanping"></use>
                </svg>
            </div>
        </h4>
        <div class="map">
            <img :src="mapImg" alt="">
            <div class="jiedian">
                <span v-for="item in moveArr" :key="item.index">
                    <router-link to="/overview">
                    <div :class="item.warning > 0 ? 'move war': 'move'" :id="item.id" :style="{left:item.positionY, top:item.positionX, color:item.color, fontSize:item.size}" @click="torouter(item)">
                        {{item.value}}
                    </div>
                    </router-link>
                </span>
                
            </div>
        </div>

        <!-- 地图放大模态框 -->
        <el-dialog
            :visible.sync="overviewSet"
            :append-to-body="true"
            :fullscreen= 'true'
            width="100%"
            height="100%"
            :modal="true"
            class="overviewSetModel">
            <div class="map">
                <img :src="mapImg" alt="">
                <div class="jiedian">
                    <span v-for="item in moveArr" :key="item.index">
                        <div  :class="item.warning > 0 ? 'move war': 'move'" :id="item.id" :style="{left:item.positionY, top:item.positionX, color:item.color, fontSize:item.size}">
                            {{item.value}}
                        </div>
                    </span>
                </div>
            </div>

      </el-dialog>
    </div>
</template>

<script>
export default {
    data () {
        return {
            moveArr:[],
            mapImg: '',
            overviewSet: false, //设置页面弹框
            timergetCardData:null
        }
    },
    created() {
       this.getCardData()
        // 从缓存获取数据定时器
        this.timergetCardData = setInterval(() => {
            setTimeout(this.getCardData(), 0);
        }, this.$store.state.requestTime);
        if(localStorage.getItem('map') == '{}' || localStorage.getItem('map') == '' 
        || localStorage.getItem('map') == undefined || localStorage.getItem('map') == 'undefined'
        || localStorage.getItem('map') == null || localStorage.getItem('map') == 'null'){
            this.mapImg = require('../../assets/map.png')
        } else{
            this.mapImg = localStorage.getItem('map')
        }   
    },
    methods: {
        quanping() {
            this.overviewSet = true
        },

        // 报警逻辑处理
        getCardData() {
            //地图获取
            if(localStorage.getItem('map') == '' || localStorage.getItem('map') == '{}'|| localStorage.getItem('map') == undefined || localStorage.getItem('map') == 'undefined'
        || localStorage.getItem('map') == null || localStorage.getItem('map') == 'null'){
                this.mapImg = require('../../assets/map.png')
            } else{
                this.mapImg = localStorage.getItem('map')

            }   
            if(localStorage.getItem("moveArr") == ''){
                this.moveArr = []
            }else{
                this.moveArr = JSON.parse(localStorage.getItem("moveArr"))
            }
            //地图节点与报警
            this.moveArr = JSON.parse(localStorage.getItem("moveArr"))
            var error = JSON.parse(localStorage.getItem("warnData"))
            if(error == null){
                return false
            }
            // console.log(error)
            // console.log(this.moveArr)
            for(var k = 0; k < this.moveArr.length; k++){ //循环地图节点
                var st = 0
                for(var i = 0; i < error.length; i++){//循环报警列表
                    if(error[i].type == this.moveArr[k].type && error[i].uid == this.moveArr[k].uid && error[i].addr == this.moveArr[k].addr){
                        if(error[i].id == null && error[i].alarmstate == 1){//报警只到设备 并且状态没有被忽略停用
                            st = 1
                        }else{//具体到子项
                            if(this.moveArr[k].s_id == ''){ //节点只到设备，产生报警
                                st = 1
                            }else if(error[i].id == this.moveArr[k].s_id && error[i].alarmstate == 1){//节点到设备子项 并且状态没有被忽略停用
                                st = 1
                            }
                        }
                    }
                }
                if(st == 0){//没有产生报警
                    this.moveArr[k].warning = ''
                }else{//产生了报警
                    this.moveArr[k].warning = 1
                }
            }
        },
        // 跳转到具体的报警内页
        torouter(data) {
            var shebei = {
                "name": "",
                "uid": data.uid,
                "addr": data.addr,
                "type": data.type
            }
            localStorage.setItem('当前设备编号', JSON.stringify(shebei))
            var type = ''
            if(data.type == 1){
                type = 'irf818'
            }else if(data.type == 2){
                type = 'humi'
            }else if(data.type == 3){
                type = 'humiA'
            }else if(data.type == 4){
                type = 'airclean'
            }else if(data.type == 5){
                type = 'airfilter'
            }else if(data.type == 6){
                type = 'mouse'
            }else if(data.type == 7){
                type = 'cleantable'
            }else if(data.type == 8){
                type = 'Tablebox'
            }else if(data.type == 9){
                type = 'cleanbox'
            }else if(data.type == 10){
                type = 'deac'
            }else if(data.type == 11){
                type = 'light'
            }else if(data.type == 12){
                type = 'wind'
            }else if(data.type == 13){
                type = 'water'
            }else if(data.type == 14){
                type = 'disinfect'
            }else if(data.type == 16){
                type = 'normal'
            }else if(data.type == 17){
                type = 'k8s'
            }else if(data.type == 18){
                type = 'ac'
            }else if(data.type == 24){
                type = 'power'
            }else if(data.type == 25){
                type = 'xtg401'
            }
             localStorage.setItem("menuRouter", type);
        }
    },
     // 清除定时器
  beforeDestroy() {
    clearInterval(this.timergetCardData);
    this.timergetCardData = null;
  },
}
</script>

<style scoped>

/deep/ .el-carousel__container .el-carousel__arrow {
    height: 150px !important;
    width: 110px !important;
    border-radius: 0;
    background: none;
}
/deep/ .el-icon-arrow-left {
    margin-left: -110px !important;
}
/deep/ .el-icon-arrow-right{
    margin-right: -110px !important;
}
    .card .icon {
        font-size: 22px;
    }
    .map{
        text-align: center;
        position: relative;
        margin-top: -10px;
        width: 900px;
        height: 400px;
        left: 50%;
        margin-left:-450px;
    }
    .map img{
        width: 900px;
        height: 400px;
        margin: 0 auto;
    }
    .move{
        position: absolute;
        top: 10px;
        left: 10px;
        height: 50px;
        line-height: 46px;
        min-width: 120px;
        width: auto;
        cursor: pointer;
    }
    .quanping{
        float: right;
        margin-top: 20px;
        margin-right: 15px;
        font-size: 25px !important;
    }
.move.war {
  transition: 0.3;
  animation: mycolor infinite 1s;
  /* color: red !important; */
}

@keyframes mycolor {
  0% {
    color: #fff;
  }
  50% {
    color: red;
  }
  100% {
    color: #fff;
  }
}

/deep/ .el-dialog.is-fullscreen{
    transform:scale(1) !important;
}
.overviewSetModel .map{
        margin-top: -40px !important;
    }
    .overviewSetModel .map{
        transform:scale(.6) !important;
    }
/* 500 */
@media screen and (min-width: 750px) {
    .overviewSetModel .map{
        margin-top: 0px !important;
    }
    .overviewSetModel .map{
        transform:scale(.8) !important;
    }
}

/* 900 */
@media screen and (min-width: 900px) {
    .overviewSetModel .map{
        margin-top: 100px !important;
    }
    .overviewSetModel .map{
        transform:scale(1) !important;
    }
}
/* 1024×576 */
@media screen and (min-width: 1024px) {
    .overviewSetModel .map{
        margin-top: 140px !important;
    }
    .overviewSetModel .map{
        transform:scale(1) !important;
    }
}
/* 1280×720 */
@media screen and (min-width: 1280px) {
    .overviewSetModel .map{
        margin-top: 170px !important;
    }
    .overviewSetModel .map{
        transform:scale(1.2) !important;
    }
}
/* 1366×768 */
@media screen and (min-width: 1366px) {
    .overviewSetModel .map{
        margin-top: 190px !important;
    }
    .overviewSetModel .map{
        transform:scale(1.3) !important;
    }
}
/* 1600×900 */
@media screen and (min-width: 1600px) {
    .overviewSetModel .map{
        margin-top: 200px !important;
    }
    .overviewSetModel .map{
        transform:scale(1.5) !important;
    }
}
/* 1920*1080 */
@media screen and (min-width: 1920px) {
    .overviewSetModel .map{
        margin-top: 270px !important;
    }
    .overviewSetModel .map{
        transform:scale(2) !important;
    }
}
/* 2048×1556 */
@media screen and (min-width: 2048px) {
    .overviewSetModel .map{
        margin-top: 400px !important;
    }
    .overviewSetModel .map{
        transform:scale(2.2) !important;
    }
}
/* 2560X1440 */
@media screen and (min-width: 2560px) {
    .overviewSetModel .map{
        margin-top: 400px !important;
    }
    .overviewSetModel .map{
        transform:scale(2.5) !important;
    }
}
/* 30000 */
@media screen and (min-width: 3000px) {
    .overviewSetModel .map{
        margin-top: 600px !important;
    }
    .overviewSetModel .map{
        transform:scale(3.3) !important;
    }
}
/* 3840×2160 */
@media screen and (min-width: 3840px) {
    .overviewSetModel .map{
        margin-top: 900px !important;
    }
    .overviewSetModel .map{
        transform:scale(4) !important;
    }
}

</style>